<template>
	<view>
		<view class="login-logo">
			<view class="logo">
				<!-- <image src="../../static/logo1.png" mode=""></image> -->
				<image src="../../static/logo.jpg" mode=""></image>
			</view>
			<text>理论试题练习技巧</text>
		</view>
		<view class="login-box">
			<view class="login-input-box">
				<view class="IDcard login-input">
					<text>账号：</text>
					<input v-model="userName" name="账号" type="text" value="" placeholder="请输入身份证号码" />
				</view>
				<view class="password login-input">
					<text>密码：</text>
					<input v-model="paseeword" name="密码" type="password" value="" placeholder="请输入密码" />
				</view>
			</view>
			<button @click="login" size="default" type="default"
				style="color:#ffffff;background:#5C9BF8;borderRadius: 20rpx; height: 90rpx; fontSize: 36rpx;margin-bottom: 50rpx;"
				hover-class="is-hover">登陆</button>
			<!-- <button class="" @click="regist" style=" color: #6b6b6bba;">
				注册账号
			</button> -->
			<view class="beian">
				ICP备案号 :<a target="_blank" href="https://beian.mps.gov.cn/#/query/webSearch">粤ICP备2024293430号</a>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		userLogin
	} from "@/api/index.js";
	export default {
		data() {
			return {
				userName: '',
				paseeword: '',
				tabbar: {
					"color": "#7A7E83",
					"selectedColor": "#01a0fa",
					"borderStyle": "black",
					"backgroundColor": "#ffffff",
					"height": "50px",
					"fontSize": "10px",
					"iconWidth": "24px",
					"spacing": "3px",
					"list": [{
							"pagePath": "pages/index/index",
							"iconPath": "/static/home.png",
							"selectedIconPath": "/static/home-hover.png",
							"text": "理论练习"
						},
						{
							"pagePath": "pages/subject/subject",
							"iconPath": "static/subject3.png",
							"selectedIconPath": "static/subject3-hover.png",
							"text": "实操练习"
						},
						{
							"pagePath": "pages/history/history",
							"iconPath": "/static/list.png",
							"selectedIconPath": "/static/list-hover.png",
							"text": "学习记录"
						}
					]

				}
			};
		},
		onLoad(val) {
			this.id = val.id
			uni.setStorage({
				key: 'id',
				data: this.id
			})
		},
		methods: {
			login() {
				let params = {
					username: this.userName,
					password: 123456
				}
				uni.showLoading({
					title: '登陆中',
					mask: true
				})
				userLogin(params).then(res => {
					uni.setStorageSync('tabbar', this.tabbar)
					let userinfo = {
						username: res.data.nickname,
						IDcardNum: res.data.username,
						userPlans: res.data.userPlans,
						gender: res.data.gender,
						planIds: res.data.planIds
					}
					uni.setStorageSync('tabbar_show', res.data.userPlans.some(obj => obj['userSub'] == 1))
					uni.setStorageSync('token', res.data.token)
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(err => {
					console.log(err);
					if (this.id == undefined) {
						uni.showModal({
							title: '警告',
							content: '无法注册，请联系报名老师',
							success: (res) => {

							}
						});
					} else {
						uni.showModal({
							title: '没有账号',
							content: '没有账号，去注册',
							confirmText: '去注册',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: `/pages/login/register${this.id == null ? '': '?val=1'}`
									})
								}
							}
						});

					}

				})
			},
			regist() {
				if (this.id == undefined) {
					uni.showModal({
						title: '警告',
						content: '无法注册，请联系报名老师',
						success: (res) => {

						}
					});
				} else {
					uni.navigateTo({
						url: 'register'
					})
				}

			},
		}
	}
</script>

<style lang="less" scoped>
	.login-logo {
		background: url(../../static/login-bg.jpg) no-repeat center top 100%/cover;
		height: 670rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-size: 50rpx;
		font-weight: bold;

		.logo {
			margin-top: 80rpx;
			border: 8rpx solid #7babff;
			background: #fff;
			border-radius: 50%;
			padding: 20rpx;
			width: 145rpx;
			height: 145rpx;
			margin-bottom: 20rpx;
			display: flex;
			text-align: center;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.login-box {
		background: #fff;
		border-radius: 25rpx;
		box-shadow: 0px 9px 71px 0px rgba(116, 116, 116, 0.3);
		margin: 20rpx;
		padding: 50rpx;
		position: relative;
		z-index: 9;
		top: -270rpx;
		color: #999;

		.login-tips {
			font-size: 34rpx;
			color: #999;
		}

		.login-input-box {
			display: flex;
			flex-direction: column;
			margin-bottom: 100rpx;

			.login-input {
				font-size: 34rpx;
				border-radius: 16rpx;
				padding: 30rpx 15rpx;

				text {
					display: block;
					font-weight: 700;
					color: #000;
				}
			}

			input {
				flex: 1;
				border-bottom: 2rpx solid #E5E5E5;
				padding: 30rpx 0;
			}
		}

		.is-hover {
			opacity: 0.7;
		}

	}
	.beian{
		display: block;
		font-size: 14px;
		text-align: center;
		margin-top: 20px;
		color: #999;
		a{
			color: #999;
			text-decoration: none;
		}
	}
</style>